var TwinklGame = TwinklGame || {};

(function (TwinklGame, manifest) {


    //CHANGE FONT SIZE ------------------------------------------------------------------------------------------------------------------------

    var theWidth,
        minWidth = 1184,
        screenIsSmall = true,
        isFullscreen = false,

        fontArr = [
            //{element:'.title-text', size_sm:'13vw', size_lg: '400px'},
            {element:'.font-button', size_sm:'4vw', size_lg: '58px'},
            {element:'.sub-heading', size_sm:'3vw', size_lg: '48px'},
            {element:'.jodal-title', size_sm:'5vw', size_lg: '65px'},
            {element:'.jodal-text', size_sm:'2.6vw', size_lg: '25px'},
            {element:'.text-button', size_sm:'3vw', size_lg: '35px'},
            {element:'.word-mat-label', size_sm:'1.8vw', size_lg: '50px'}

            //ADD IN ANY TEXT TO MAKE SURE IT RESPONDS CORRECTLY
        ];

    function resizeScreen(){

        theWidth = $('body').width();
        var smallDisplay = true;

        theWidth >= minWidth && (smallDisplay = false);
        isFullscreen && (smallDisplay = true);

        if (smallDisplay != screenIsSmall) {
            screenIsSmall = !screenIsSmall;
            $.each(fontArr, function(key, value){
                var newSize = smallDisplay ? value.size_sm : value.size_lg;
                $(value.element).css('font-size', newSize);
            });
        }

        //ADD IN ANYTHING ELSE THAT NEEDS TO RESPOND DIFFERENTLY(CIRCLE BUTTONS ETC)
    }

    //AUDIO SAMPLES----------------------------------------------------------------------------------------------------------------------------------------------

    var buttonClickAudio = new Howl({src: [manifest.buttonClick.src]}),
        correctAnswerSoundAudio = new Howl({src: [manifest.correctAnswerSound.src]}),
        wrongAnswerAudio = new Howl({src: [manifest.wrongAnswerSound.src]}),
        swooshAudio = new Howl({src: [manifest.swoosh.src]});

    //------------------------------------------------------------------------------------------------------------------------------------------------------------

    TwinklGame.setup = function (config) {

        resizeScreen();

        $(window).resize(resizeScreen);
        $(window).resize(textResize);
        $(window).resize(changeTextOfUnloaded);


        //SEARCH FOR SUPERSCRIPT
        config.cards.forEach(function(e,elem){
            config.title = detectFraction(config.title);
            config.cards[elem].word = detectFraction(config.cards[elem].word);
        });




        // VARIABLES-----------------------------------------------------------------------------------------------------------------------------------------------

        var wholeDocument = $("#word-mat-container"),
            allPages = $(".pages"),
            titlePage = $("#titlePage"),
            instructionsPage = $("#instructionsPage"),
            mainPage = $("#mainPage"),
            soundToggle = $(".sound-toggle"),
            navBar = $(".go-nav-panel"),
            fullScreen = $("#fullscreen-button"),
            titleText = $("#title"),
            subHeading = $("#subContainer"),
            allInstructions = $(".allInstructions"),
            closeButton = $("#close-button"),
            letsGo = $("#lets-go-button"),
            playButton = $("#playButton"),
            instructionsPanel = $("#instructionsPanel"),
            wellDonePage = $("#well-done"),
            wellDoneTitle = $('#isItCorrect'),
            wellDoneText = $('#answerWasText'),
            checkButton = $("#check-button"),
            introTitle = $("#intro-title-text"),
            playAgainButton = $("#play-again");


        //SETUP BACKGROUND IMAGE & ALL TEXT------------------------------------------------------------------------------------------------------------------------


        config.cards.forEach(function(e,p){
            e.id = p;
        });


        wholeDocument.css({ "background-image": "url(" + TwinklGame.Utils.getConfigAssetUrl(config.background_image_url) + ")" });
        wholeDocument.addClass('interactive-theme-' + config.theme_colour);

        titleText.html(config.title);



        subHeading.html(config.sub_title);
        introTitle.html(config.intro_title);
        allInstructions.html(config.intro_text);
        wellDoneTitle.html(config.success_title);
        wellDoneText.html(config.success_text);

        closeButton.hide();

        $(".fit-me-button").html(config.lets_go_text);

        checkButton.html(config.check_button_text);
        playButton.html(config.play_button_text);
        playAgainButton.html(config.play_again_button_text);


        wholeDocument.addClass(config.branding+"-branding");

        if(config.branding =="twinkl"){
            $(".main-twinkl-logo").show();
        }

        else if(config.branding=="beyond"){
            wholeDocument.css('font-family', '"roboto" !important');
            $(".main-twinkl-logo").hide();
            $(".beyond-twinkl-logo").show();
        }

        titleText.widowFix();

        //todo put in fittext
       // testFontSize(titleText,180);
        //testFontSize($(".fit-me-button"),50);

        textResize();


        hidePages();
        function hidePages(){
            allPages.hide();
            titlePage.show();
        }

        //ADD ANY ELEMENTS IN HERE YOU WANT TO REMOVE WIDOWS FROM---------------------------------------------------------------------------------------------------


        //INSERT ANYTHING THAT NEEDS TO FIT TO CONTAINER------------------------------------------------------------------------------------------------------------

        function textResize(){
           testFontSize(titleText,180);
            testFontSize($(".fit-me-button"),150);

        }

        //START GAME------------------------------------------------------------------------------------------------------------------------------------------------

        letsGo.click(function(){
            swooshAudio.play();
            instructionsPage.show();
            instructionsPanel.css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            titlePage.hide();
        });

        //PLAY BUTTON-----------------------------------------------------------------------------------------------------------------------------------------------

        playButton.click(function(){
            buttonClickAudio.play();
            instructionsPage.hide();
            mainPage.show();
            invertNav();
            textResize();
            changeTextOfUnloaded();

        });

        //PLAY AGAIN BUTTON--------------------------------------------------------------------------------------------------------------------------------------------

        $("#play-again").click(function(){
            buttonClickAudio.play();
            allPages.hide();
            mainPage.show();
            resetGame();
            textResize();
            changeTextOfUnloaded();
        });

        //INSERT GAME CODE HERE **************************************************************************************************************************************

        var beingDragged;
        var a = 3;

        //SORT OUT ARRAYS

        //CREATE LABELS
        resetGame();
        function resetGame(){


            var newArray = $.extend(true, [], config.cards); //NEW ARRAY FROM CONFIG
            TwinklGame.Utils.shuffleArray(newArray); //SHUFFLE ARRAY
            newArray = newArray.slice(0, 9); //CUT TO 9 ITEMS FROM ARRAY
            $(".word-mat-label").remove(); //REMOVE ANY CURRENT LABELS

            for(var i =1; i<=9;i++){
                var f = (i-1);
                var markupCode =  "<div class='word-mat-label' data-num = '"+newArray[f].id+"' data-id='"+newArray[f].title+"'><div class='inner-text'id='inner-text-"+i+"'>"+ newArray[f].word +"</div></div>";
                $("#list-of-words").prepend(markupCode);
            }



            //CHANGE Z-INDEX ORDER ON CLICK
            $(".word-mat-label").mousedown(function(){
                $(".word-mat-label").css({"z-index":"10"});
                $(this).css({"z-index":"100"});


                var num = $(this).attr("data-num");


                var audio = search(num,config.cards);

                console.log(audio,"RATS")

                if(audio){
                    var newAudio1 =  new Howl({src: audio});
                    newAudio1.play();
                }else{
                   // buttonClickAudio.play();
                }

            });



            //CHECK
            function search(nameKey, myArray){

                for (var i=0; i < myArray.length; i++) {

                    if (myArray[i].id == nameKey && myArray[i].audio) {

                        if(myArray[i].audio.assetUrl.length>0){
                            return myArray[i].audio.assetUrl;
                        }else {
                            return false;
                        }

                    }
                }
            }

            $(".word-mat-label").draggable({
                revert : true,

                drag: function(ev, ui) {
                    beingDragged = $(this).parent();
                    $(this).css("z-index", a++);
                },
            });


            $('.drop-area').droppable({
                drop: function(ev, ui) {
                    $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);

                    if(beingDragged.hasClass("grid-item-left")){
                        $(ui.draggable).siblings().removeClass('word-label-active');
                    }
                    $(ui.draggable).addClass('word-label-active');
                    $(ui.draggable).siblings().detach().css({top: 0,left: 0}).appendTo(beingDragged);
                }
            });


            $('.grid-item-left').droppable({
                drop: function(ev, ui) {
                    $(ui.draggable).detach().css({top: 0,left: 0}).prependTo(this);
                    $(ui.draggable).removeClass('word-label-active');
                }
            });


            TwinklGame.Utils.shuffleArray(newArray); //SHUFFLE ARRAY

            for(var i =1; i<=9;i++){ //ADD ID TO DROP AREA
                var f = (i-1);
                $("#grid-item-"+i).attr('data-id', newArray[f].title);
                $("#grid-item-"+i + " .image-area").css({ "background-image": "url(" + TwinklGame.Utils.getConfigAssetUrl(newArray[f].image) + ")" });
            }

            changeTextOfUnloaded(); //FIT TEXT TO BOX

        }

        $(".label-check-button").click(function(){
            checkAnswers();
        });


        function checkAnswers(){

            var totalCorrect =0;

            for(var i =1; i<=9;i++){
                var f = (i-1);

                if($("#grid-item-"+i).attr('data-id')== $("#grid-item-"+i+ " .word-mat-label").attr('data-id')){
                    totalCorrect++ //ADD TO TOTAL SCORE
                }else{
                    $("#grid-item-"+i+ " .word-mat-label").removeClass('word-label-active');
                    $("#grid-item-"+i+ " .word-mat-label").prependTo($("#list-of-words")); //MOVE BACK TO LIST
                }
            }

            if(totalCorrect==9){
                buttonClickAudio.play();
                $(".pages").hide();
                wellDonePage.show();
                wellDonePage.css({'top':'100%'}).animate({'top':'15%'},500,"easeOutBack");
            }else{
                wrongAnswerAudio.play();
            }
        }


        function changeTextOfUnloaded(){

            for(var i=1;i<=9;i++){
               // console.log($("#inner-text-"+i).height(),$("#inner-text-"+i).width())
                testFontSize($("#inner-text-"+i),100);
            }

        }


        //NAVIGATION FUNCTIONS **************************************************************************************************************

        function detectFraction(superChar) {
            //console.log(superChar,"YEs")
            // var split = superChar.split(/(?=\[)|(?<=\])/); //SPLIT BY []
            var split = splitBetween(superChar,"[","]")

            //FOR EACH SPLIT IN THE TEXT (EACH SUM)
            split.forEach(function (e, index) {
                if (e.includes("[")) {
                    var without =  e.substring(1);
                    without = without.substring(0, without.length - 1); //TAKE OFF END CHARACTERS
                    // var array = without.split(/(?<!\<)(?=[\(\)\/\^])|(?<=[\(\)\/\^])/);//SPLIT BY BRACKETS INDICES OR FRACTIONS
                    var array =splitAll(without,"(",")","^","/");
                    array = changeArray(array);
                    split[index] = '<span style="white-space: nowrap;">' +array.join("") + '</span>';
                }else{
                    split[index] = '<span>' +split[index] + '</span>';
                }

            });
            return '<div >' +split.join("") + '</div>';
        }



        function splitBetween(array,char1,char2){
            var newArray =[];
            var marker;
            for(var i=0;i<=array.length;i++){
                if(array[i]===char1 ){
                    newArray.push(array.slice(marker,i));
                    marker =i;
                }
                else if(array[i]===char2 ){
                    newArray.push(array.slice(marker,(i+1)));
                    marker =(i+1);
                }
                else if(i===(array.length)){
                    newArray.push(array.slice(marker,i));
                }
            }
            return newArray;
        }


        function splitAll(array,char1,char2,char3,char4){

            var newArray =[];
            var marker=0;


            for(var i=0;i<=array.length;i++){
                if(array[i]===char1 ){
                    newArray.push(array.slice(marker,i)); //(
                    newArray.push(array.slice(i,i+1)); //(
                    marker =i+1;
                }
                else if(array[i]===char2 ){
                    newArray.push(array.slice(marker,i)); //(
                    newArray.push(array.slice(i,i+1)); //(
                    marker =i+1;
                }
                else if(array[i]===char3 ){
                    newArray.push(array.slice(marker,i)); //(
                    newArray.push(array.slice(i,i+1)); //(
                    marker =i+1;
                }
                else if(array[i]===char4 ){
                    newArray.push(array.slice(marker,i)); //(
                    newArray.push(array.slice(i,i+1)); //(
                    marker =i+1;
                }
                else if(i===(array.length)){
                    newArray.push(array.slice(marker,i));
                }
            }
            return newArray;

        }

        function changeArray(array){
            array.forEach(function(e,index){
                if(e=="^"){
                    array[index]="<span style='white-space: nowrap ; width:1rem;' ><sup>";
                    array =  searchStopForward("^",array,index);
                }else if(e=="/"){
                    array[index] = "</div><div class='mid-line'></div><div class='bottom-num'>";
                    array = searchStopForward("/",array,index);
                    array = searchStopBack("/",array,index);
                }else{
                    array[index]= detectAlgebra(array[index],array[index+1]);
                }
                array=array
            });

            //REMOVE BRACKETS
            array.forEach(function(e,index){if(e=="(" || e==")"){array.splice(index, 1);}});
            return array;
        }


        function searchStopBack(input,array,index){
            var points = 0,temp;
            for(var i=index;i>=0;i--){
                if(array[i]==")"){
                    points++
                }else if(array[i]=="("){
                    if(points==0){
                        array.splice(i, 0, generateCode(input,"backward",array[i]));
                        temp=array;
                        break
                    }else{
                        points--;
                    }
                }
                if(i===0){ //IF REACHES END
                    array.splice(i, 0, generateCode(input,"backward",array[i]));
                    temp=array;
                    break;
                }
            }
            return temp;
        }


        function searchStopForward(input,array,index){
            var points = 0,temp;
            for(var i=index;i<=array.length;i++){
                if(array[i]=="("){
                    points++
                }else if(array[i]==")"){
                    if(points==0){
                        array.splice(i, 0, generateCode(input,"forward",array[i]));
                        temp =array;
                        break;
                    }else{
                        points--;
                    }
                }
                if(i==array.length){ //IF REACHES END
                    array.push(generateCode(input,"forward",array[i]));
                    temp=array;
                    break;
                }
            }
            return temp;
        }

        function generateCode(input, direction,text){
            if(input =="/"){
                if(direction=="forward"){
                    return "</div></span>"
                }else{
                    return "<span class='fraction-styling' style='width:auto'><div class='top-num'>";
                }
            }else if (input =="^"){
                if(direction=="forward"){
                    return '</sup></span>';
                }else{
                    return '<span style="white-space: nowrap"><sup>'+ text;
                }
            }
        }

        //CHANGE ALGEBRAEIC LETTERE
        function detectAlgebra(string,next){
            // var arr = string.split(/(?=\<)|(?<=\>)/); //SPLIT BUT KEEP IN

            var regex = /(<div>.*?<\/div>)|(<span>.*?<\/span>) /;
            var arr= string.split(regex).filter(Boolean);

            arr.forEach(function(e,i){
                if(e.includes("<")){ //CHECK NOT IN A SPAN OR SUP
                    //0
                }else{
                    var margin="";
                    if(next!=undefined && next.includes("^")){
                        margin = "margin-right:0;"
                    }else{
                        margin = "margin-right:0.2em ;"
                    }
                    arr[i] = arr[i].replace(/[A-Za-z]/g,function(x){return "<span style='font-family:times-new-roman; font-style:italic; font-size:100% ;"+margin+"'>" +x+"</span>"});
                }
            });
            return arr.join("");
        }






        //CLOSE BUTTON
        closeButton.click(function(){
            buttonClickAudio.play();
            hidePages();
            invertNav();
            textResize();
            resetGame();
        });

        //INVERT THE NAVIGATION COLOURS AND TOGGLE CLOSE
        function invertNav(){
            fullScreen.toggleClass("inverted");
            soundToggle.toggleClass("inverted");
            navBar.toggleClass("theme-background-dark");
            closeButton.toggle();
        }


        //FULLSCREEN TOGGLE ---------------------------------------------------------------

        fullScreen.click(function () {
            buttonClickAudio.play();

            if(fullScreen.hasClass("expand-screen"))
            {fullScreen
                .removeClass("expand-screen")
                .addClass("reduce-screen");
                TwinklGame.Utils.makeFullScreen(document.getElementById('word-mat-container'));
            }
            else{
                fullScreen
                    .removeClass("reduce-screen")
                    .addClass("expand-screen");
                TwinklGame.Utils.leaveFullScreen();
            }


            setTimeout(function(){textResize();changeTextOfUnloaded();},100)

        });

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function () {
            isFullscreen = !isFullscreen;
            resizeScreen();
            textResize();
            changeTextOfUnloaded();
        });

        //SOUND TOGGLE -----------------------------------------------------------------------

        soundToggle.click(function () {
            buttonClickAudio.play();
            if(soundToggle.hasClass("sound-off"))
            {soundToggle
                .removeClass("sound-off")
                .addClass("sound-on");
                Howler.mute(true);

            }else{
                soundToggle
                    .removeClass("sound-on")
                    .addClass("sound-off");
                Howler.mute(false);
            }
        });

        //CHECK IF TEXT OVERFLOWS----------------------------------------------------------------

        function testFontSize(e, s) {

            e.css( "font-size", s + ("px"));

            var size = e.css('font-size'); //GETS FONT SIZE
            size = parseInt(size, 10); //REMOVE PX

            //WHILE TEXT OVERFLOWS ELEMENT REDUCE TEXT SIZE
            for(;e.get(0).offsetHeight<e.get(0).scrollHeight||e.get(0).offsetWidth<e.get(0).scrollWidth;)e.css("font-size","-=1")
            ;

           // e.css("font-size","-=1");
        }

        resizeScreen();
        $('#preload-div').hide();

        setTimeout(function(){
            console.log("test");
            testFontSize(titleText,150);
            testFontSize($(".fit-me-button"),50);
        },200)



    };

})(TwinklGame, lib.manifest);